import {Button, DatePicker, Form, Input, Modal, Radio, Select, Space, Table} from 'antd';
import React, {useState,useEffect} from 'react';
import {useNavigate} from 'react-router-dom';
import coupon from "../../../store/Coupon/coupon";
import store from "../../../store/index"
import moment from "moment";
const {Option} = Select;
const AddCoupon = () => {
    const navigate = useNavigate();
    const [validityTime, setValidityTime]=useState()
    //提交部分整合数据
    const onReset = () => {
        navigate(-1)
    };
    const submit = (values) => {
        console.log(values)
        setTimeout(() => {
            navigate('/home/CouponManagement')
        }, 500);
    };
    const onFinish = (values) => {
        values.validityTime=validityTime
        values.content = content;
        console.log('Success:', values);
        values.orderAmount=Number(values.orderAmount);
        console.log('Success:', values);
        // store.coupon.addCoupon(values)
        // submit(values)
        store.coupon.addCoupon(values)
    };
    //时间选择器的数据处理
    const range = (start, end) => {
        const result = [];
        for (let i = start; i < end; i++) {
            result.push(i);
        }
        return result;
    };

    const disabledDate = (current) => {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
    };
    const disabledDateTime = () => ({
        disabledHours: () => range(0, 24).splice(4, 20),
        disabledMinutes: () => range(30, 60),
        disabledSeconds: () => [55, 56],
    });

    //选择内容模态框
    const [isContentOpen, setisContentOpen] = useState(false);//选择内容模态框
    // ----------------------选择内容模态框------------
    const [content, setContent] = useState()

    const contentOk = () => {
        console.log("模态框确认");
        console.log(coupon.selectContent);
        let str = ''
        coupon.selectContent.forEach((v, i) => {
            str += v.name + ' '
        })
        setContent(str);
        setisContentOpen(false);
    };
    const contentCancel = () => {
        console.log("取消");
        setisContentOpen(false);
    };

    const contentColumns=[
        {
            title: '商品名称',//表格列名
            dataIndex: 'name',//对应数据字段
            key: 'name',//该列的唯一值
        },
        {
            title: '所属App',//表格列名
            dataIndex: 'app',//对应数据字段
            key: 'app',//该列的唯一值
        },
        {
            title: '频道',//表格列名
            dataIndex: 'channel',//对应数据字段
            key: 'channel',//该列的唯一值
        },
        {
            title: '价格',//表格列名
            dataIndex: 'price',//对应数据字段
            key: 'price',//该列的唯一值
        },
    ]
    // ----------------------------选择内容模态框--条件查询表单
    const [contentQueryform] = Form.useForm();


    const contentFinish = (values) => {
        console.log('查询 ', values);
    };
    const contentQuery = () => {
        const a = contentQueryform.getFieldsValue(true)
        console.log(a)
    };
    //接口渲染
    useEffect(() => {
        store.channel.getAllChannel()
    }, [])
    return <div>
        <h1>新增</h1>
        <Form
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 14,
            }}
            layout="horizontal"
            onFinish={onFinish}
        >
            <Form.Item label="名称" name={"couponName"}>
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item
                label="关联app"
                name={"associateApp"}
            >
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="小黑早教">小黑早教</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item
                label="类型"
                name={"couponType"}
            >
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="抵用券">抵用券</Radio.Button>
                    <Radio.Button value="折扣券">折扣券</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label="面额/折扣" name={"denomination"}>
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="订金金额" name={"orderAmount"}>
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item
                label="适用商品"
                name={"applicableGoods"}
            >
                <Radio.Group buttonStyle="solid">
                    <Radio.Button value="指定频道">指定频道</Radio.Button>
                    <Radio.Button value="指定商品">指定商品</Radio.Button>
                </Radio.Group>
            </Form.Item>
            <Form.Item label="选择频道" name={"channelId"}>
                <Select style={{width:'280px'}}>
                    {store.channel.channels.map((v)=>{
                        return <Select.Option value={v.channelId} key={v.channelId}>{v.channelName}</Select.Option>
                    })}
                </Select>
            </Form.Item>
            {/*<Form.Item*/}
            {/*    label="选择商品"*/}
            {/*    rules={[{ required: true, message: '请选择内容', whitespace: true }]}*/}
            {/*>*/}
            {/*    <Form.Item noStyle>*/}
            {/*        <Input value={content} className={'inputBox'}  />*/}
            {/*    </Form.Item>*/}
            {/*    <Button style={{ marginLeft: "20px" }} onClick={chooseContent}>浏览</Button>*/}
            {/*</Form.Item>*/}
            <Form.Item label="有效期" name="validityTime">
                <DatePicker
                    format="YYYY-MM-DD HH:mm:ss"
                    disabledDate={disabledDate}
                    disabledTime={disabledDateTime}
                    onChange={(moment, string)=>{
                        console.log(string)
                        setValidityTime(string)
                    }}
                    className={'inputBox'}
                />
            </Form.Item>
            <Form.Item label="使用说明" name={"instructions"}>
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item label="状态" name={"couponStatus"}>
                <Input className={'inputBox'}/>
            </Form.Item>
            <Form.Item className={'buttonStyle'}>
                <Button className={'buttonBox'} htmlType="submit" onClick={submit}>
                    保存
                </Button>
                <Button htmlType="button" onClick={onReset}>
                    取消
                </Button>
            </Form.Item>
        </Form>

        {/*模态框板块*/}
        <Modal title="选择内容"
               open={isContentOpen}
               onOk={contentOk}
               onCancel={contentCancel}
               okText="保存"
               cancelText="取消"
               width={650}>
            <Form
                form={contentQueryform}
                name='contentform'
                onFinish={contentFinish}
                layout="inline">
                <Form.Item
                    label="所属App"
                    name="App"
                >
                    <Select style={{width: 100}}>
                        <Option value='小黑早教'>小黑早教</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="频道"
                    name="channel">
                    <Select style={{width: 100}}>
                        <Option value=''>全部</Option>
                        <Option value='国学'>国学</Option>
                        <Option value='英语'>英语</Option>
                        <Option value='逻辑'>逻辑</Option>
                        <Option value='美术'>美术</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="商品名称"
                    name="contentName">
                    <Input placeholder='商品名称' style={{width:100}}/>
                </Form.Item>

                <Space size={'large'}>
                    <Button type='primary' onClick={contentQuery} className='btnStyle'>搜索</Button>
                </Space>

            </Form>
            <br/>
            <Table
                rowSelection={{
                    type: 'checkbox',
                    onChange(_, rows) {
                        store.coupon.setSleContent(rows)
                        console.log(rows);
                    },
                    defaultSelectedRowKeys: [content]
                }}
                columns={contentColumns}
                dataSource={coupon.tablePage}
                rowKey={(record) => record.id}
                bordered
                pagination={false}
                scroll={{
                    y: 240,
                }}
            />\
        </Modal>
    </div>
}
export default AddCoupon;